<!DOCTYPE html>
<html lang="en">
  <head>

        <!-- 引入 echarts.js -->
        <script src="http://pic.beeboom.net/sourse/echarts.min.js"></script>
        <!-- 引入主题 -->
        <script src="http://pic.beeboom.net/sourse/wonderland.js"></script>
        
        

        <!-- element-ui css-->
        <link rel="stylesheet" href="http://pic.beeboom.net/sourse/element-ui@2.15.7/lib/theme-chalk/index.min.css">

        <!-- vue -->
        <script src="http://pic.beeboom.net/sourse/vue.min.js"></script>
        
          <!-- element-ui js-->
          <script src="http://pic.beeboom.net/sourse/element-ui@2.15.7_lib_index.min.js"></script>

        <!-- 引入axios -->
        <script src="http://pic.beeboom.net/sourse/axios_0.26.0_axios.min.js"></script>

          <!-- 引入xlsx -->
          <script src="http://pic.beeboom.net/sourse/xlsx.full.min.js"></script>
          <script src="http://pic.beeboom.net/sourse/FileSaver.js"></script>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <!-- <meta http-equiv="refresh" content="120"> -->
      <meta name="viewport" content="width=device-width, initial-scale=1.0,  minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>
      <title>看板</title>
      <!-- <style>
          #app{
              margin: 0 auto; 
              text-align: center
          }
      </style> -->
  </head>
  <body>   
      <div id="app"> 
        <el-container  style="height: 100vh; background-color: #0e1e2f;">
          <el-header style="background-color: #1a2a3a; color: #e6e6e6; height: 150px;padding: 2px;">
          <div>
            <el-row style="height: 80px">
              <el-col :span="20">
                <div>
                  <div style="padding-top: 10px;"><span style="font-size:30px">{{monitor_title}}</span></div>
                </div>
              </el-col>
              <el-col :span="4"> 
                <div style="margin-top: 10px;">
                  <el-button style="float: right; padding: 3px; margin-right: 5px" type="danger"  icon  = "el-icon-user-solid" circle @click="logout"></el-button>
                  <em style="float: right; padding: 1px; margin-right: 5px">{{user}}</em>
                  <div style="clear: right"></div>
                  <span style="float: right; padding: 1px; margin-right: 5px">{{ currentTime }}</span>
                </div>
              

                <!-- <div style="float: right; padding: 3px; margin-right: 5px">{{ currentTime }}</div> -->
              </el-col>
            </el-row>
          </div>
            <div style="padding-top:2px">
              <el-row>
                <el-col :span="24">
                  <el-menu
                    mode="horizontal"
                    :default-active="activeIndex"
                    @select="handleSelect"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                  >
                    <el-menu-item v-for="item in menuItems" :key="item.index" :index="item.index" style="width:150px;text-align:center">
                      <span v-if="!item.children"><i :class="item.icon||'el-icon-menu'"></i>{{ item.label }}</span>
                      <el-submenu v-if="item.children" :index="item.index" style="width:150px;text-align:center" @click.native.stop>
                        <template #title ><i :class="item.icon ||'el-icon-menu'"></i>{{ item.label }}</template>
                        <el-menu-item v-for="subItem in item.children" :key="subItem.index" :index="subItem.index">
                          <i :class="subItem.icon ||'el-icon-menu'"></i>{{ subItem.label }}
                        </el-menu-item>
                      </el-submenu>
                    </el-menu-item>
                  </el-menu>
                </el-col>
              </el-row>  
            </div>
          </el-header>
          
          <el-main>
            <iframe :src="`http://${url}/admin/`" style="width: 100%; height: 100%; border: none;"></iframe>
          </el-main>
        </el-container>
      </div>
  </body>
</html>

<script>

const vm = new Vue({
    el: '#app', 
    data() {
        return {
          monitor_title:"NB仪表监测系统",
          activeIndex:'configUpload',
          date1:'',
          date2:'',
          userInfo:'',
          user:'',
          currentTime: new Date().toLocaleTimeString(),
          deviceData: [],
          transferData: [],
          transferValue: [],
          loading: false,
          searchQuery: '',
          tableHeight: 500,
          sort: {
            prop: null,
            order: null
          },
          menuItems: []
      }
  },
  computed: {
    filteredDeviceData() {
      let data = this.deviceData;
      
      if (this.searchQuery) {
        data = data.filter(item => 
          item.deviceCode.includes(this.searchQuery)
        );
      }
      
      if (this.sort.prop) {
        data = data.sort((a, b) => {
          if (this.sort.order === 'ascending') {
            return a[this.sort.prop] > b[this.sort.prop] ? 1 : -1;
          } else {
            return a[this.sort.prop] < b[this.sort.prop] ? 1 : -1;
          }
        });
      }
      
      return data;
    }
  },
  mounted() {
    console.log('monitor mounted')
    const token = localStorage.getItem("token");
    const menu = localStorage.getItem("menu");
    console.log(menu)
    let url=window.location.host
    this.url=url
    this.menuItems = JSON.parse(menu)
    // const mark = localStorage.getItem("mark");
    // this.monitor_title = mark
    let a=token.split('.')
    console.log(atob(a[1]))
    // this.userInfo=atob(a[1])
  
    let user=JSON.parse(atob(a[1])).username
    // console.log(user)
    // console.log(mark)
    this.user=user
    this.refreshData()
    setInterval(() => {
      this.currentTime = new Date().toLocaleTimeString();
    }, 1000);
  },
  //页面关闭
  beforeDestroy() {
    
  },
  methods: {
    handleChange(value, direction, movedKeys) {
      console.log(value, direction, movedKeys)
    },
    refreshData(){
      console.log('refreshData')
      this.loading = true;
      let url=this.url
      axios.get(`http://${url}/sbcb/getRealtimeDevices`)
      .then(response => {
        console.log(response)
        this.deviceData = response.data;
        this.transferData = this.deviceData.map(item => ({
          key: item.deviceCode,
          label: item.deviceUserName
        }));
        console.log(this.transferData)
      })
      .catch(error => {
        console.log(error)
        this.$message.error('数据加载失败');
      })
      .finally(() => {
        this.loading = false;
      })
    },

    //页面跳转处理
    handleSelect(key, keyPath){
      console.log(key);
      console.log(keyPath);
        // 如果路径存在，跳转到对应路径
        let currentPath = window.location.href;
        let currentPathArray = currentPath.split('/');
        currentPathArray[currentPathArray.length - 1] = key;
        let newPath = currentPathArray.join('/');
        if (newPath.includes('localhost')) {
          newPath = newPath + '.html';
        }
        // window.location.href = newPath;
       // 检查路径是否存在
       navigateToPage(newPath)

      function navigateToPage(url) {
        console.log('navigateToPage')
        console.log(url)  
        fetch(url)
        .then(response => {
            if (response.ok) {
                console.log('response.ok')
                // 如果页面可访问，跳转到目标页面
                window.location.href = url;
            } else {
              console.log('response.not ok')
              let currentPathArray = url.split('/');
              currentPathArray[currentPathArray.length-1] = '404';
              let newPath = currentPathArray.join('/');
              // window.location.href = newPath;
              // console.log(newPath)
              // 如果页面不可访问，跳转到404页面
              if(url.includes('localhost')){
                //url最后添加.html
                newPath = newPath + '.html';
              }
              console.log(newPath)
              window.location.href = newPath;
            }
        })
        .catch(error => {
            console.log('error')
            // 如果请求失败（例如网络问题），也跳转到404页面
            console.error("Error fetching the page:", error);
              // 如果页面不可访问，跳转到404页面

        });
}
    },


    //登出
    logout(){
    this.$confirm('确认登出?', '登出', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          callback: action => {
            this.$message({
              type: 'info',
              message: `Logout: ${ action }`,
              customClass: 'winClass',
              center: true
            });
            if(action =='confirm'){
                localStorage.clear();
                //清除页面数据
                this.meterStatus = [];
                this.combinedMeterData = [];
                this.configSet = [];
                this.gatewayCount = 0;
                this.meterCount = 0;
                this.faultyMeterCount = 0;
                this.unregisteredMeterCount = 0;
                localStorage.clear();
                //跳转到登录页面,url最后一级别替换为login，如果是本地文件路径在后面添加.html
                // let currentPath = window.location.href;
                // let currentPathArray = currentPath.split('/');
                // currentPathArray[currentPathArray.length-1] = 'login';
                // let newPath = currentPathArray.join('/');
                // if(newPath.includes('file://')){
                //   newPath = newPath + '.html';
                // }
                this.handleSelect('login',['login'])
                // setTimeout(this.handleSelect('login',['login']),1000);
            }
          }
        });
  },
  handleSortChange({ prop, order }) {
    this.sort.prop = prop;
    this.sort.order = order;
  }
}   
})
</script>
<style>
    .tagValue{
        text-align: center;
        font-size:30px;
        color: #92a8d1;
    }
    .box-card{
        width: 100%;
        margin-bottom: 5px;
 
    }
    .el-transfer-panel{
      width: 300px  ;
    }
    .el-transfer-panel__body{
      width: 300px;
    }
    .el-transfer-panel__list{
      width: 300px;
    }
    /* .winClass{
        width: 80%;
    } */
    /* @media screen and (max-width: 750px) {
    .winClass {
    width: 60% !important;
  } */
    .el-message-box__btns { 
    padding: 5px 15px 0; text-align: center; 
    }    
    .el-message-box { 
    width: 60%; 
    }
    .max{
       width:30px;
       height:30px 
    }
    /* 增加菜单项的内边距 */
    .el-menu-item {
       text-align: center;
       cursor: pointer;
       padding: 0;
    }

    /* 调整下拉箭头的位置 */
    .el-submenu__title {
        align-items: center; /* 垂直居中对齐 */
        padding: 0;
    }
    .time{
      color: #ffffff;
      font-size: 16px;
      margin-top: 10px;
    }
    .el-card {
      background-color: #1a2a3a;
      color: #ffffff;
    }
    .el-list-item {
      background-color: #2a3a4a;
      margin: 5px 0;
      padding: 10px;
      border-radius: 5px;
    }
    .el-table {
      background-color: #0e1e2f;
      overflow-y: auto;
    }
    .el-table__body-wrapper {
      overflow-y: auto;
    }
    .el-table__fixed-header-wrapper {
      background-color: #1a2a3a;
    }
    .el-table__fixed-body-wrapper {
      background-color: #0e1e2f;
    }
    .el-table th {
      background-color: #1a2a3a !important;
      color: #e6e6e6;
    }
    .el-table tr {
      background-color: #0e1e2f;
      color: #e6e6e6;
    }
    .el-table--striped .el-table__body tr.el-table__row--striped td {
      background-color: #1a2a3a;
    }
    .el-table--border::after, .el-table--group::after, .el-table::before {
      background-color: #2a3a4a;
    }
    .el-table--border {
      border-color: #2a3a4a;
    }
    .el-table td, .el-table th.is-leaf {
      border-bottom-color: #2a3a4a;
    }
    .el-table--border th, .el-table--border td {
      border-right-color: #2a3a4a;
    }
</style>